import { BaseObject } from "./Object";
import { CanvasMapRenderer } from "./renderer/canvas/Map";
export interface MapOption {}
export class PluggableMap extends BaseObject {
  private viewport_: HTMLElement;
  private renderer_: CanvasMapRenderer;
  private animationDelayKey_: any;
  private animationDelay_: any;

  constructor(opts: MapOption) {
    super();
    this.viewport_ = document.createElement("div");
    //   this.viewport_.className = 'ol-viewport' + (TOUCH ? ' ol-touch' : '');
    this.viewport_.style.position = "relative";
    this.viewport_.style.overflow = "hidden";
    this.viewport_.style.width = "100%";
    this.viewport_.style.height = "100%";

    this.addEventListener("change:target", this.handleTargetChanged_);
    this.addEventListener("change:layergroup", this.handleLayerGroupChanged_);
    this.addEventListener("change:view", this.handleViewChanged_);
    this.addEventListener("change:size", this.handleSizeChanged_);

    this.setProperties(opts);
    this.renderer_ = this.createRenderer();
  }
  private handleLayerGroupChanged_() {}
  private handleViewChanged_() {
    this.render();
  }
  private handleSizeChanged_() {}
  private handleTargetChanged_() {
    let targetElement;
    if (this.getTargetElement()) targetElement = this.getTargetElement();
    targetElement.appendChild(this.viewport_);
  }
  public render() {
    if (this.renderer_ && this.animationDelayKey_ === undefined) {
      this.animationDelayKey_ = requestAnimationFrame(() => {
        this.animationDelayKey_ = undefined;
        this.renderFrame_(Date.now());
      });
    }
  }

  public renderFrame_(time: number) {
    let frameState = /** @type {module:ol/PluggableMap~FrameState} */ {
      animate: false,
      coordinateToPixelTransform: this.coordinateToPixelTransform_,
      extent: extent,
      focus: focus,
      index: this.frameIndex_++,
      layerStates: layerStates,
      layerStatesArray: layerStatesArray,
      pixelRatio: this.pixelRatio_,
      pixelToCoordinateTransform: this.pixelToCoordinateTransform_,
      postRenderFunctions: [],
      size: size,
      skippedFeatureUids: this.skippedFeatureUids_,
      tileQueue: this.tileQueue_,
      time: time,
      usedTiles: {},
      viewState: viewState,
      viewHints: viewHints,
      wantedTiles: {},
    };
    this.renderer_.renderFrame(frameState);
  }
  public createRenderer() {
    throw new Error("use a map type that has a createRenderer method");
    return null;
  }
  public getViewport() {
    return this.viewport_;
  }
  public getTarget() {
    return this.get("target");
  }

  public getTargetElement() {
    const target = this.getTarget();
    if (target !== undefined) {
      return typeof target === "string"
        ? document.getElementById(target)
        : target;
    } else {
      return null;
    }
  }
}
